<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui/css/layuilast.css" media="all">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body>
    <div id="tabDIV" style="display: block">
        <div class="layui-row" style="margin-top: 3vh;">
     <!--
            <div class="layui-inline">
                <label class="layui-form-label">参数编号</label>
                <div class="layui-input-inline">
                    <input type="text" id="deviceMac1" autocomplete="off" class="layui-input" placeholder="设备编号">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">参数名称</label>
                <div class="layui-input-inline">
                    <input type="tel" id="deviceUser1" autocomplete="off" class="layui-input" placeholder="填写使用人名称">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">参数值</label>
                <div class="layui-input-inline">
                    <input type="tel" id="devicePhone1" autocomplete="off" class="layui-input" placeholder="填写使用人手机号">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">链接</label>
                <div class="layui-input-inline">
                    <input type="tel" id="city1" autocomplete="off" class="layui-input" placeholder="填写设备所在城市">
                </div>
            </div>
                -->
            <div class="layui-inline" style="float: right;margin-top: 1vh;margin-right: 1vh">
                <!--<button class="layui-btn" onclick="reset()">
                    <i class="layui-icon layui-icon-delete"></i>清除
                </button>
                <button class="layui-btn" onclick="search()">
                    <i class="layui-icon layui-icon-search"></i>查询
                </button>-->
                <button id="btn-add" class="layui-btn">
                    <i class="layui-icon layui-icon-add-1"></i>新增
                </button>
                <!--            <button id="btn-export" class="layui-btn" onclick="exclUser()">-->
                <!--                <i class="layui-icon layui-icon-add-1"></i>导出-->
                <!--            </button>-->
            </div>
        </div>
        <table id="table" lay-filter="table"></table>
    </div>
    <div id="editForm" style="display: none; height: 100%;margin-top: 30px;">
        <form class="layui-form" id="updateForm" enctype="multipart/form-data">
            <input type="hidden" name="id">


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">参数名称</label>
                    <div class="layui-input-block">
                        <!--<input id="deviceMac" type="text" name="devicesn" autocomplete="off" class="layui-input">-->
						 <div class="layui-input-inline" style="width: 66%;">
               <select name="paraname" id="paraname" lay-verify="required">
                     <option value="banner1">banner1</option>
					     <option value="banner2">banner2</option>
						     <option value="banner3">banner3</option>
							  <option value="banner3">banner3</option>
							   <option value="普通电话">普通电话</option>
							    <option value="400电话">400电话</option>
								 <option value="APP下载二维码">APP下载二维码</option>
                                </select>
                    </div>
                </div>
            </div>
			<div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">参数类型</label>
                    <div class="layui-input-block">
                        <!--<input id="deviceMac" type="text" name="devicesn" autocomplete="off" class="layui-input">-->
						 <div class="layui-input-inline" style="width: 66%;">
               <select name="paratype" id="paratype" lay-verify="required">
                     <option value="文字">文字</option>
					     <option value="图片">图片</option>
						     
                                </select>
                    </div>
                </div>
            </div>
           

          <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">参数值</label>
                    <div class="layui-input-block">
                        <input type="text" name="paravalue" id="paravalue" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

           <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">图片</label>
                        <input type="hidden" id="headImg" name="upload">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="upload_img">
                                <i class="layui-icon">&#xe67c;</i>选择图片
                            </button>
                            <span id="prompt"></span>
                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                预览图：
                                <img class="headImg" width="100px" onclick="javascript:visitimg(this.src);">
                            </blockquote>
                        </div>
                    </div>
                </div>
<!--
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">使用人手机号</label>
                    <div class="layui-input-block">
                        <input type="text" id="adminphone" name="adminphone" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备所在城市</label>
                    <div class="layui-input-block">
                        <input type="text" name="city" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备经度</label>
                    <div class="layui-input-block">
                        <input type="text" name="jingdu" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备纬度</label>
                    <div class="layui-input-block">
                        <input type="text" name="weidu" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <a href="http://api.map.baidu.com/lbsapi/getpoint/index.html?qq-pf-to=pcqq.c2c" target="_blank" style="text-decoration:underline;margin-left: 11%;color: #0000FF">根据地址获取经纬度</a>
          -->
	   </form>
    </div>
	<!--
    <div id="addressDiv" style="display: none">
        <table id="addressTab" lay-filter="addressTab"></table>
    </div>-->

</body>


<script charset="utf-8" src="../../layui/js/jquery/jquery.js"></script>
<script charset="utf-8" src="../../layui/js/jquery/jquery.serializeJSON.js"></script>
<script charset="utf-8" src="../../layui/layuilast.js"></script>
<script charset="utf-8" src="../../layui/js/md5/md5.min.js"></script>
<script charset="utf-8" src="../../layui/js/extend/common.js"></script>
<!--<script src="../../js/http.js"></script>-->
<script type="text/javascript">

    var pageURL = "https://www.liufengtec.com/DeviceManagerWeb/api/para/getAllPara";
	var rootURL = "http://www.liufengtec.com/";
    var insertURL = "\/yk\/ykAdminDevManger\/addDevice";
    var updateDataURL = "\/yk\/ykAdminDevManger\/updateDevice";
    var delURL = "\/yk\/ykUser\/deleteLeaseUser";
    var uploadURL = "\/yk\/mita\/uploadFile";
    var tableId = "table";
	let files='';
    var cols = [
        [{
                title: '序号',
                templet: '#indexTpl',
                width: 50
            },
            // {field: 'id',title: '用户ID', hide:false},
            {
                field: 'paraName',
                title: '参数名称'
            },
            {
                field: 'paraType',
                title: '参数类型'
            },
            {
                field: 'paraValue',
                title: '参数值'
            },
            
            // {field: "isDelete", title: '是否禁用',templet : '#isEnableStatus', width : 130},
            {
                toolbar: "#barDemo",
                align: 'center',
                title: '操作',
                width: 254,
                align: 'left'
            }
        ]
 
    ];


    function exclUser() {
        var usertType = $("#roleId").val().trim();
        window.location.href = "/leaseUser/downloadOrderUser?time==usertType" + usertType;
    }

    //表格数据初始化
    if(!localStorage.getItem('token')||!localStorage.getItem('userid')){
        window.location.href='../login.html'}else{
		console.log("device");
    initTab(tableId, "#table", "table", pageURL, cols, {
        userid:localStorage.getItem('userid'),
        token:localStorage.getItem('token')
    }, null);
     }

    function reset() {
        $("#deviceMac1").val("");
        $("#deviceUser1").val("");
        $("#devicePhone1").val("");
        $("#city1").val("");
    }

    //条件查询
    function search() {
        var table = layui.table;
        var deviceMac = $("#deviceMac1").val().trim();
        var deviceUser = $("#deviceUser1").val().trim();
        var devicePhone = $("#devicePhone1").val().trim();
        var city = $("#city1").val();
        table.reload(tableId, {
            page: {
                curr: 1
            },
            where: {
                deviceMac: deviceMac,
                deviceUser: deviceUser,
                devicePhone: devicePhone,
                city: city
            },
        });
    }

function visitimg(src) {

        var img = new Image();  
        img.src = src;
        var imgHtml = "<img src='" + src + "' width='500px' height='500px'/>";  
		console.log("visitimg");
        //弹出层
        layer.open({  
            type: 1,  
            shade: 0.8,
            offset: 'auto',
            area: [500 + 'px',550+'px'],
            shadeClose:true,
            scrollbar: false,
            title: "图片预览", //不显示标题  
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
            cancel: function () {  
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
            }  
        }); 
    }





    //打开编辑框
    function openEditForm(type,deviceid) {
        layer.open({
            type: 1,
            skin: 'layui-layer-demo', //样式类名
            // skin: 'layui-layer-rim', //加上边框
            area: ['80%', '80%'], //宽高
            anim: 2,
            shadeClose: true, //开启遮罩关闭,
            maxmin: true,
            title: "编辑参数信息",
            content: $("#editForm"),
            btn: ['提交', '关闭'],
            yes: function(index, layero) {
                
                var data = $('#updateForm').getData();
                const formData = new FormData($("#updateForm" )[0]);
                var paratype = $("#paratype").val().trim();
				var paravalue = $("#paravalue").val().trim();
				if((paratype=="文字")&&(paravalue==""))
				{
				layer.alert("表单数据没有填写完全!");
				return;
				}
                //data.paravalue = paravalue;
				console.log(paratype);
				console.log(data);
                for (var key in data) {
                    var element = data[key];
                    if (key != "id") {
					
                        console.log("key----->" + key + "  element = " + element)
                       /* if (element == null || element == '' || element == undefined&&(key!='paravalue')) {
                            layer.alert("表单数据没有填写完全!");
                            return;
                        }*/
                    }
                }
				
                formData.append('token',localStorage.getItem('token')),
                formData.append('userid',localStorage.getItem('userid'))
				console.log(formData)
				
                switch (type){
                    case 'add':
					console.log("add");
					var url="https://www.liufengtec.com/DeviceManagerWeb/api/para/addParaNoPic";
				if((paratype=='图片')||(paratype=='文件'))
				{
				formData.append('upload',files)
				url="https://www.liufengtec.com/DeviceManagerWeb/api/para/addPara";
				}
				
					//console.log("add");
					$.ajax({
            url: url,
            asynnc:false,
            cache:false,            
            data: formData,
            dataType: 'json',
            contentType: false,
             processData: false,
            type: 'post',
            success: function(res){
                if (res.errorcode == 0) {
				layer.msg(res.resultmsg);
                    location.reload();
                }else{
                   layer.msg(res.resultmsg);
                }
				
            },
            error: function(res) {
                // 服务器繁忙
                alert('服务器繁忙');
            },

        });
                             
         
                break;
                    case 'edit':
					console.log("edit");
                    var url="https://www.liufengtec.com/DeviceManagerWeb/api/para/modifyParaNoPic";
				if((paratype=='图片')||(paratype=='文件'))
				{
				formData.append('upload',files)
				url="https://www.liufengtec.com/DeviceManagerWeb/api/para/modifyPara";
				}
				
					$.ajax({
            url: url,
            asynnc:false,
            cache:false,            
            data: formData,
            dataType: 'json',
            contentType: false,
             processData: false,
            type: 'post',
            success: function(res){
                if (res.errorcode == 0) {
				layer.msg(res.resultmsg);
                    location.reload();
                }else{
                   layer.msg(res.resultmsg);
                }
				
            },
            error: function(res) {
                // 服务器繁忙
                alert('服务器繁忙');
            },

        });
               /* API.ge
                  /*  API.geteditService(formData,
                    (res)=>{
                            layer.msg(res.resultmsg, {
                                        time: 1500,
                                        shade: 0.4
                                    }, function() {
                                        if (res.errorcode===0) {
                                            layer.close(index);
                                            location.reload();
                                        }
                                    });
                            },
                    (res)=>{
                            layer.msg(res.resultmsg);
                                }
                )         */              
                           
                            break; 
                }    
            }
        });
    }


    layui.use(['table', 'form', 'upload'], function() {
        var table = layui.table;
        var form = layui.form();
        var upload = layui.upload;

        //上传图片
        upload.render({
            elem: '#upload_img',
            url: uploadURL,
			//accept: 'file',
			//size:2000000,
            choose: function(res) {
                //上传完毕回调
                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    res.preview(function(index, file, result){
                    console.log(index); //得到文件索引
                    console.log('文件对象',file); //得到文件对象
                  //  console.log(result); //得到文件base64编码，比如图片
                    $("#prompt").text(file.name);
                    $("#headImg").val(file);
                    files=file
                    $(".headImg").prop("src", result);
                    });
            },
        });//end render
        //新增
        $("#btn-add").click(function() {
            $("#updateForm")[0].reset();
            $("#id").val("");
            form.render();
            $("#deviceMac").attr("disabled", false);
            openEditForm('add');
        });

        //删除和修改
        table.on('tool(table)', function(obj) {
            var data = obj.data;
			//console.log(data);
            if (obj.event === 'edit') {
                console.log(data);
				$("#paraname").val(data.paraName);
                $("#paratype").val(data.paraType);
                $("#paravalue").val(data.paraValue);
				if(data.paraType=="图片")
                $(".headImg").prop("src", rootURL+data.paraValue);
               // $("#deviceMac").attr("disabled", true);
                form.render();
                openEditForm('edit',data.paraId);
            }

        });


    });


    function openUrl(url) {
        window.open(url);
    }
</script>

<!-- 启用禁用开关-->
<script type="text/html" id="isEnableStatus">
{{# if(d.isDelete == 1){ }}
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="isEnable" />
    {{# }else if(d.isDelete==0){ }}
        <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="isEnable" checked="checked" />
        {{# } }}
</script>

<!--table的序号-->
<script type="text/html" id="indexTpl">
{{d.LAY_TABLE_INDEX+1}}
</script>



<!--table的操作按钮-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <!--    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>-->
    <!--    <a class="layui-btn layui-btn-xs" lay-event="address">收货地址</a>-->
    <!--    {{# if(d.type==3||d.type==5||d.type==6||d.type==7||d.type==8){ }}-->
    <!--    <a class="layui-btn layui-btn-xs" lay-event="addSales">添加销售</a>-->
    <!--    {{# } }}-->
</script>

</html>